React

import React, { FC, useEffect, useRef, useState, Fragment, useMemo } from 'react';

import { LoadingProps } from './interface';

import './index.module.less';

const Loading: FC = (props) => {

  const {

    type = 'default',

    mask = false,

    loadingText,

    icon,

    width = '2em',

    height = '2em',

    style = {},

  } = props;

  const timer = useRef(null);

  const [activeDotIndex, setActiveDotIndex] = useState(0);

  useEffect(() => {

    timer.current = setInterval(() => {

      setActiveDotIndex((old) => {

        if (old === 2) {

          old = 0;

        } else {

          old++;

        }

        return old;

      });

    }, 500);

    return () => {

      clearInterval(timer.current);

    };

  }, []);

  const loadingStyle = useMemo(() => {

    const returnStyle = style;

    returnStyle.width = width;

    returnStyle.height = height;

    return returnStyle;

  }, [width, height, style]);

  return (

      {mask && }

      {type === 'default' ? (

            {icon || (

            )}

          {loadingText && {loadingText}}

      ) : (

          {new Array(3).fill('').map((item, index) => {

            return {item};

          })}

      )}

  );

};

export default Loading;